<template>
  <div class="pending_alarm">
    <el-button
      type="danger"
      plain
      @click="delete_classification"
    >删除</el-button>
    <div
      class="input_box"
      style="margin-bottom: 10px;"
    >
    <span class="demonstration"></span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        style="margin: 0 10px"
      >
      </el-date-picker>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 200px"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
      >搜索</el-button>
    </div>
    <!-- <div class="block">
      <span class="demonstration"></span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div> -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        label=""
        width="50"
      >
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-checkbox
            v-model="checkedAll"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="告警ID"
      >
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="设备名称"
      >
        <template slot-scope="scope">
          {{ scope.row.device_name }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="设备分类"
      >
        <template slot-scope="scope">
          {{ scope.row.classification }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="告警描述"
      >
        <template slot-scope="scope">
          {{ scope.row.alarm_description }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="告警等级"
      >
        <template slot-scope="scope">
          <el-tag
            type="success"
            v-if="scope.row.frequency == 5"
          >一般告警</el-tag>
          <el-tag
            type="danger"
            v-if="scope.row.frequency == 6"
          >中等告警</el-tag>
          {{ scope.row.alarm_level }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="最新告警时间"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.alarm_time }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="告警次数"
      >
        <template slot-scope="scope">
          {{ scope.row.frequency }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="check(scope.row.device_name, scope.row)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      layout="prev, pager, next"
      :total="50"
    >
    </el-pagination>

  </div>

</template>

<script>
import { getList } from '@/api/pending_alarm'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },

  },
  data() {
    return {
      list: null,
      listLoading: true,
      checkedAll: false,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    add_classification() {
      
    },
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
<style>
.pending_alarm {
  padding: 10px;
}
.input_box {
  float: right;
}

.pager {
  float: right;
  margin: 10px 0;
}
</style>
